<template>
      <div id="recommend">
        <mt-navbar v-model="selected" id="fixedBar" :class="{fixedBar:isFixed}">
          <mt-tab-item id="1" :class="{fixedBox:ofFixed}">全部</mt-tab-item>
          <mt-tab-item id="2" :class="{fixedBox:ofFixed}">通讯社交</mt-tab-item>
        </mt-navbar>
        <mt-loadmore :top-method="loadTop"
                     ref="loadmore" style="font-size: .4rem;">
            <mt-tab-container v-model="selected">
              <mt-tab-container-item id="1">
                  <mt-swipe :auto="4000">
                    <mt-swipe-item>
                      <img src="../assets/轮播/1.jpeg">
                    </mt-swipe-item>
                    <mt-swipe-item>
                      <img src="../assets/轮播/2.jpeg">
                    </mt-swipe-item>
                    <mt-swipe-item>
                      <img src="../assets/轮播/3.jpeg">
                    </mt-swipe-item>
                    <mt-swipe-item>
                      <img src="../assets/轮播/4.jpeg">
                    </mt-swipe-item>
                    <mt-swipe-item>
                      <img src="../assets/轮播/5.jpeg">
                    </mt-swipe-item>
                    <mt-swipe-item>
                      <img src="../assets/轮播/6.jpeg">
                    </mt-swipe-item>
                    <mt-swipe-item>
                      <img src="../assets/轮播/7.jpeg">
                    </mt-swipe-item>
                  </mt-swipe>
                  <div class="box">
                    <router-link class="boxLink" :to="{name:'Essential'}">
                      <img src="../assets/小图标/育儿.png">
                      育儿
                    </router-link>
                    <router-link class="boxLink" :to="{name:'Essential'}">
                      <img src="../assets/小图标/点赞.png">
                      必备
                    </router-link>
                    <router-link class="boxLink" :to="{name:'Essential'}">
                      <img src="../assets/小图标/分类.png">
                      分类
                    </router-link>
                    <router-link class="boxLink" :to="{name:'Essential'}">
                      <img src="../assets/小图标/福利.png">
                      福利
                    </router-link>
                    <router-link class="boxLink" :to="{name:'Essential'}">
                      <img src="../assets/小图标/签到领积分.png">
                      领积分
                    </router-link>
                    <router-link class="boxLink" :to="{name:'Essential'}">
                      <img src="../assets/小图标/皇冠.png">
                      游戏中心
                    </router-link>
                  </div>
                  <div style="clear: both" v-for="(item,index) in newdata" :key="index">
                      <div class="left">
                        <img :src="item.img">
                      </div>
                      <div class="right">
                        <p>{{item.name}}</p>
                        <p>{{item.active}}</p>
                        <p>{{item.activeOne}}</p>
                        <span>{{item.btn}}</span>
                      </div>
                    </div>
              </mt-tab-container-item>
              <mt-tab-container-item id="2">
                <div style="clear: both" v-for="(item,index) in newdata" :key="index">
                  <div class="left">
                    <img :src="item.img">
                  </div>
                  <div class="right">
                    <p>{{item.name}}</p>
                    <p>{{item.active}}</p>
                    <p>{{item.activeOne}}</p>
                    <span>{{item.btn}}</span>
                  </div>
                </div>
              </mt-tab-container-item>
            </mt-tab-container>
        </mt-loadmore>
        <mt-tabbar :fixed="true" class="tabbars">
          <mt-tab-item id="推荐">
            <router-link exact :to="{name:'Recommend'}">
              <img src="../assets/小图标/心1.png">
              推荐
            </router-link>
          </mt-tab-item>
          <mt-tab-item id="应用">
            <router-link :to="{name:'Users'}">
              <img src="../assets/小图标/应用.png">
              应用
            </router-link>
          </mt-tab-item>
          <mt-tab-item id="游戏">
            <router-link :to="{name:'Game'}">
              <img src="../assets/小图标/游戏.png">
              游戏
            </router-link>
          </mt-tab-item>
          <mt-tab-item id="排行">
            <router-link :to="{name:'Rankings'}">
              <img src="../assets/小图标/排行.png">
              排行
            </router-link>
          </mt-tab-item>
          <mt-tab-item id="管理" >
            <router-link :to="{name:'Administration'}">
              <img src="../assets/小图标/管理.png">
              管理
            </router-link>
          </mt-tab-item>
        </mt-tabbar>
      </div>
</template>

<script>
  import axios from 'axios'
    export default {
        name: "Recommend",
      data(){
          return{
            getUrl:"https://www.fastmock.site/mock/570927fb874b97eba109025ea6bd33ba/zhuchengao/recommend",
            newdata:[],
            num:0,
            selected:'1',
            isFixed:false,
            ofFixed:true,
            offsetTop:0,
          }
      },
      methods:{
        gets(){
            axios.get(this.getUrl,
              {
                userId:"01",
                userName:"MT"
              },
              {
                headers:{
                  "Content-Type":"application/x-www-form-urlencode"
                }
              }).then(res=>{
                  this.newdata = res.data.data
                  console.log(this.newdata)
                }).catch(error=>{
                console.log(error)
              })
          },
        get(){
          axios.get(this.getUrl)
            .then(res=>{
                this.newdata = res.data.data;
              })
            .catch(error=>{
              console.log(error)
            })
        },
        loadTop() {
          this.$refs.loadmore.onTopLoaded();
          this.num+=1;
          if (this.num%2==0){
            this.getUrl = "https://www.fastmock.site/mock/570927fb874b97eba109025ea6bd33ba/zhuchengao/recommend";
          } else {
            this.getUrl = "https://www.fastmock.site/mock/570927fb874b97eba109025ea6bd33ba/zhuchengao/use";
          }
          this.get();
        },
        handScroll(){
          var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
          if (scrollTop >= this.offsetTop){
            this.isFixed = true;
            this.ofFixed = false
          }else {
            this.isFixed = false;
            this.ofFixed = true
          }
        },
      },
      // 渲染完成，挂载完成
      mounted() {
        this.gets();
        this.offsetTop = document.querySelector('#fixedBar').offsetTop;
        window.addEventListener('scroll',this.handScroll);
      }
    }
</script>

<style>
  .mint-swipe{
    width: 100%;
    height: 4rem;
  }
  #recommend .mint-swipe img{
    width: 100%;
    height: 4rem;
  }
  .box .boxLink{
    float: left;
    margin: 0 .4rem;
    display: flex;
    flex-direction: column;
    font-size: .34rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    color: #252525 !important;
  }
  .box img{
    width: .7rem;
    height: .7rem;
    margin-bottom: .1rem;
  }
  .fixedBar{
    position: fixed;
    top: 1.6rem;
    z-index: 100;
    width: 100%;
  }
  .fixedBox{
    display: none;
  }
</style>
